<template>
  <view class="content">
    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <view class="title">
        <tabs></tabs>
      </view>
      <!-- <component :is="getComponent"></component> -->
      <view class="body">
        <vehicle v-if="active == 1" ref='vehicle'></vehicle>
        <vin v-if="active == 2"></vin>
        <productCode v-if="active == 3"></productCode>
        <oe v-if="active == 4"></oe>
      </view>
      <asideSpell v-if="active == 1" @anchorLocaltion="anchorLocaltion"></asideSpell>
    </view>
  </view>
</template>

<script>
  import {mapmapMutations,mapState} from 'vuex'
  import tabs from '@/components/tabs/index.vue'
  import vehicle from '@/components/vehicle/index.vue'
  import asideSpell from '@/components/aside-spell/index.vue'
  import vin from '@/components/vin/index.vue'
  import productCode from '@/components/productCode/index.vue'
  import oe from '@/components/oe/index.vue'

  export default {
    components:{
      tabs,vehicle,asideSpell,vin,productCode,oe
    },
    data(){
      return{
        
      }
    },
    computed:{
      ...mapState('app',['active']),
      // getComponent(activeComponent){
      //   if(!activeComponent){
      //     return "vehicle"
      //   }
      //   return activeComponent
      // }
    },
    methods:{
      anchorLocaltion(item){
         this.$refs.vehicle.anchorLocaltion(item);
      },
      share(){
        wx.showShareMenu({
          withShareTicket:true,
          //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
          menus:["shareAppMessage","shareTimeline"]
        })
      },
    },
    onShareAppMessage(res) {
        if (res.from === 'button') {// 来自页面内分享按钮
            console.log(res.target)
        }
        return {
            title: '分享', //分享的名称
            path: '/pages/index ',
            mpId:'wx5abdebd46a3d8331' //此处配置微信小程序的AppId
        }
    },
    //分享到朋友圈
    onShareTimeline(res) {
        return {
            title: '分享到朋友圈',
            type: 0,
            summary: "",
        }
    },
    created(){
      // console.log("active",this.active)
    },
    onLoad: function() {
      console.log("active",this.active)
      this.share()
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    scrollbar-width: none;
    height: 100%;
  }

  .logo {
    height: 150rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 auto;
    /* padding: 20px; */
  }

  .title {
    min-height: 14vh;
    width: 100vw;
    /* background-color: black; */
    font-size: 36rpx;
    color: #8f8f94;
  }
  .body{
    flex:1;
  }
</style>
